
<gm:page title="SCVinterface" authenticate="false" >
<gm:data id="events" data="${app}/events"/>
<gm:data id="events2" data="${app}/events2"/>





<script type="text/javascript" language="javascript">
<![CDATA[
var proc = false;
var loopDone = true;
var geoReq = 0;
var geocoder = new GClientGeocoder();
var matchCount = 0;
var Ratings = new Array();
var urlLocation = new GPath("gd:where/@valueString");

var urlLatPath = new GPath("gsx:lat");
var urlLonPath = new GPath("gsx:long");
var urlRatePath = new GPath('gsx:rate');

var mapNormalProj = G_NORMAL_MAP.getProjection();
var polyNumSides = 50;
var polySideLength = 360/polyNumSides;
var polyColor = '#000000';
var hrThick = 2;

var clear = true;
var rateArray = new Array();

function changeImage(overlay) {
if (overlay.setImage) {
overlay.setImage('http://maps.google.com/mapfiles/kml/pal3/icon21.png');
}
}

function setupMap(map) {
map.enableDoubleClickZoom();
map.enableContinuousZoom();
map.setMapType(G_HYBRID_MAP);
}

function selectVenueCountry() {
clear = true;
var countries = google.mashups.getObjectById('DisList').getData();
var country = google.mashups.getObjectById('DisList').getSelectedEntry();
var urlGPath = new GPath('gsx:atomlink');



var ctryString = urlGPath.getValue(country);// + sqString;
google.mashups.getObjectById('RetailerList').setData(ctryString);
var map = google.mashups.getObjectById('venueMap').getMap();
GEvent.addListener(map, "addoverlay", changeImage);
}

function selectIventory() {

var countries = google.mashups.getObjectById('RetailerList').getData();
var country = google.mashups.getObjectById('RetailerList').getSelectedEntry();
var urlGPath = new GPath('gsx:atomlink');

var ctryString = urlGPath.getValue(country);// + sqString;
google.mashups.getObjectById('searchInventory').setData(ctryString);
google.mashups.getObjectById('InventoryList').setData(ctryString);


}

function getRlist() {
var countries = google.mashups.getObjectById('RetailerList').getData();
// alert("ss");
// var country = countries.entryAt(0);
// var urlGPath = new GPath('gsx:atomlink');

// var ctryString = urlGPath.getValue(country);// + sqString;
var map = google.mashups.getObjectById('venueMap').getMap();

for (var j = 0; j < rateArray.length; j += 1) {
map.removeOverlay(rateArray[j]);
}

rateArray = new Array();
for (var i = 0; i < countries.size(); i+=1) {

var lat = urlLatPath.getValue(countries.entryAt(i));
var long = urlLonPath.getValue(countries.entryAt(i));
var rate = urlRatePath.getValue(countries.entryAt(i));

var colorToUse = '#FF1000';
var gpt = new GLatLng(parseFloat(lat), parseFloat(long), true);

// alert(colorToUse);
drawZone(gpt, rate, colorToUse,rateArray);
}

}

function drawZone(location, rate, radColor,rateArray) {

if (rate < 0.2){
var feltRadius = 3*(1-rate);
}
else if (rate < 0.4){
var feltRadius = 1.8*(1-rate);
}
else if (rate < 0.6){
radColor = '0000FF';
feltRadius = 1-rate;
}
else{
feltRadius = 0.5;
radColor = '#008000';
}

drawDish(location, feltRadius, radColor,rateArray);
}

function drawDish(location, radius, dishColor){
var map = google.mashups.getObjectById('venueMap').getMap();
// alert(location);
// alert(radius);
// alert(dishColor);

var clockPoint = location;
var polyPoints = [];
var minPoints = [];
var minPoly;
var secPoints = [];
var secPoly;
var hrPoints = [];
var hrPoly;
var hrCirclePoints =[];
var polygon;
var offset = 0;
var now = new Date();

var hrColor = dishColor;

offset = Math.floor((clockPoint.lng()+7.5)/15);
polyPoints.length = 0;
hrCirclePoints.length = 0;

var latConv = clockPoint.distanceFrom(new GLatLng(clockPoint.lat()+0.1, clockPoint.lng()))/100;
var lngConv = clockPoint.distanceFrom(new GLatLng(clockPoint.lat(), clockPoint.lng()+0.1))/100;

var step = parseInt(360/polyNumSides)||10;

for(var i=0; i<=360; i+=step){
var pint = new
GLatLng(clockPoint.lat() + (radius/latConv * Math.cos(i *
Math.PI/180)), clockPoint.lng() + (radius/lngConv * Math.sin(i *
Math.PI/180)), true);
polyPoints.push(pint);
}
//clock face polygon


polygon = new GPolygon(polyPoints,hrColor ,2,0.8,hrColor ,0.15);

map.addOverlay(polygon);
rateArray.push(polygon);
}


function getReportlist() { 
var Relist = google.mashups.getObjectById('Reportlist').getData(); 
var Relist2 = google.mashups.getObjectById('Reportedlist').getData(); 
 var Relist3 = google.mashups.getObjectById('listOfEvent2').getData(); 
 var ReportrateGPath = new GPath('gsx:rate'); 
var ReportnameGPath = new GPath('gsx:title'); 
  var nameGPath = new GPath('atom:title'); 
    var ratingGPath = new GPath('atom:rating');
    var Reportsize = Relist.size();
       var Reportsize2 = Relist2.size(); 
         var Reportsize3 = Relist3.size(); 
           // alert(Reportsize3); 
             if (Reportsize2 > 0) { 
               for (var i=0; i < Reportsize2; i++) 
                 {
                  Relist2.removeEntry(Relist2.entryAt(i)); 
                   } 
                   } 
                     for (var i=0; i < Reportsize; i++) { 
                       var Reportentry = Relist.entryAt(i);
                          var Reportrate = ReportrateGPath.getValue(Reportentry);
                             var Reportname = ReportnameGPath.getValue(Reportentry); 
                               if (Reportrate < 0.6){ // alert(Reportrate);
                                  var Reportentry2 = Relist2.createEntry(); 
                                    // var Reportentry3 = Relist3.createEntry(); 
                                      nameGPath.setValue(Reportentry2,Reportname); 
                                        ratingGPath.setValue(Reportentry2,Reportrate);
                                           Relist2.addEntry(Reportentry2); 
                                             // Relist3.addEntry(Reportentry3);
                                                } }
                                                   google.mashups.getObjectById('Reportlist').setVisible(false); 
                                                     var Reportsize2 = Relist2.size();
                                                        if (Reportsize3 < Reportsize2){ 
                                                          var num = Reportsize2 - Reportsize3;
                                                             for (var i=0; i < num; i++) {
                                                                var Reportentry3 = Relist3.createEntry(); 
                                                                Relist3.addEntry(Reportentry3);
                                                                 } } 
                                                                 if (Reportsize3 > Reportsize2){
                                                                  var num = Reportsize3 - Reportsize2; 
                                                                  for (var i=0; i < num; i++) {
                                                                   Relist3.removeEntry(Relist3.entryAt(i));
                                                                    } } }

function mailMe(form){
Subject=document.testform.inputbox1.value;
mail1= document.testform.Mailbox1.value;
mail2= document.testform.Mailbox2.value;
mail3= document.testform.Mailbox3.value;
mail4= document.testform.Mailbox4.value;
mail5= document.testform.Mailbox5.value;
content= document.testform.comment.value;
location = "mailto:"+mail1+";"+mail2+";"+mail3+";"+mail4+";"+mail5+"?subject="+Subject+"&body="+content;;
document.testform.submit();
}


function CheckEmail(str)

{

var at="@"
var dot="."
var lat=str.indexOf(at)
var lstr=str.length
var ldot=str.indexOf(dot)
if (str.indexOf(at)==-1){
alert("Invalid E-mail")
str.focus()
return false
}

if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
alert("Invalid E-mail")
str.focus()
return false
}

if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
alert("Invalid E-mail")
str.focus()
return false
}

if (str.indexOf(at,(lat+1))!=-1){
alert("Invalid E-mail")
str.focus()
return false
}

if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
alert("Invalid E-mail")
str.focus()
return false
}

if (str.indexOf(dot,(lat+2))==-1){
alert("Invalid E-mail")
str.focus()
return false
}

if (str.indexOf(" ")!=-1){
alert("Invalid E-mail")
str.focus()
return false
}

return true

}

function GetRating(){
var timelist=google.mashups.getObjectById('InventoryList').getData();
var rating= google.mashups.getObjectById('RatingList').getData();

var timeGPath = new GPath('gsx:time');
var ratingGPath =new GPath('atom:title');

var entry=timelist.entryAt(0);
var size=timelist.size();
var rsize = rating.size();
// alert(rsize);

var num = 0;
var sevday = 604800000;


var curdate = new Date();
var curvalue = curdate.getTime();
// alert(curvalue);
for (var i=0; i<size; i++) {
var entry =timelist.entryAt(i);
var time = timeGPath.getValue(entry);
var timevalue = Date.parse(time);
var diff = curvalue - timevalue;
// alert(diff);
if (diff < sevday){

num = num + 1;
}

}

var percentage = num/size;

// alert(percentage);
// alert(rsize);
percentage = percentage + '';

// alert(ratingGPath.getValue(entry));
if (rsize == 1){
rating.removeEntry(rating.entryAt(0));
}
var rateentry = rating.createEntry();
ratingGPath.setValue(rateentry,percentage.substring(0,4));
// alert(ratingGPath.getValue(rateentry));
rating.addEntry(rateentry);





}

]]></script>


<div class="gm-app-header">

<h1>
<font face="Arial Black">Singapore Pharmaceutical Supply Chain Visibility</font>
</h1>
<p>
FYP Project,
By Su Yezhen
</p>

</div>

<div>
<gm:tabs target="myContainer"/>

<gm:container id="myContainer" style="width:100%;">
<gm:section id="sectionVenues" title="Inventroy Level">
<table class="gm-padded" width="100%">
<tr valign="top">
<td width="408" style="padding-right:10px;>
<div style="font-size:100%; height: 158px; padding-right:0px;">
<span style="float:right;">
<script type="text/javascript" language="javascript">
<![CDATA[
var google_ad_client = "pub-1102520404693184";
var google_ad_width = 180;
var google_ad_height = 150;
var google_ad_format = "180x150_as";
var google_ad_type = "text_image";
//2007-09-28: Cricket Mashup
var google_ad_channel = "4257005825";
var google_color_border = "000000";
var google_color_bg = "FFFFFF";
var google_color_link = "0000FF";
var google_color_text = "000000";
var google_color_url = "008000";
var google_ui_features = "rc:6";
]]></script>

</span>
<div style="height: 150px; overflow:auto; margin-right:5px; margin-bottom: 5px;">
<gm:list id="DisList" data="http://spreadsheets.google.com/feeds/list/pfihDhEKsM19I6BzQsXr5Ig/od6/public/values" pagesize="50" template="DisListTemplate">
<gm:sort name="DisSort" ref="gsx:title"/>
<gm:handleEvent event="select" execute="selectVenueCountry();"/>
</gm:list>
</div>
</div>
<div style="font-size:80%; height: 160px; overflow: auto;">
<gm:list id="RetailerList" data="http://spreadsheets.google.com/feeds/list/o06860016059102210174.6466228511777770018/o/public/values" pagesize="100" template="RetailerListTemplate">
<gm:sort name="RetSort" ref="gsx:title"/>
<gm:handleEvent event="repaint" execute="getRlist()"/>
<gm:handleEvent src="venueMap" event="select"/>
<gm:handleEvent event="select" execute="selectIventory()"/>

</div>

<div style="font-size:80%; height: 185px; overflow: auto;">
<gm:list id="InventoryList" data="http://spreadsheets.google.com/feeds/list/o06860016059102210174.6466228511777770018/o/public/values" pagesize="100" template="InventoryTemplate">
<gm:sort name="InvSort" ref="gsx:title"/>
<gm:handleEvent event="repaint" execute="GetRating()"/>
</gm:list>
</div>


<div style="font-size:80%; height: 65px; overflow: auto;">

<gm:list id="RatingList" data="${tmp}/rating" template="RatingTemplate">

</div>

<div style="font-size:80%; height: 105px; overflow: auto;">
<gm:search id="searchInventory" data="http://spreadsheets.google.com/feeds/list/pfihDhEKsM1-wWhqoCQx1Fg/od6/public/values?alt=rss" ref="gsx:title" hint="Enter the product name">
</gm:search>
<gm:list id="searchList" data=${searchInventory} template="searchTemplate">

</div>


</td>
<td>
<div style="height: 70px; overflow: auto;">
<gm:item id="venueDetail" template="detailedVenue">
<gm:handleEvent src="RetailerList" event="select"/>
</gm:item>
</div>



<div style="height: 520px; overflow: none;">
<gm:map id="venueMap" control="large" maptypes="true" height="520px" geolocationref="gsx:location" lat="1.3" lng="103.8" zoom="12" data="${RetailerList}" infotemplate="mapVenue">
<gm:handleEvent src="RetailerList" event="select"/>
</gm:map>
</div>
</td>
</tr>
</table>
</gm:section>

<gm:section id="ReportBoard" title="Report Board">


<h2><font color="red">
The following list of pharmacies don't satisfy the standard:
</font></h2>
<table border="0" width="800px">
<tr>
<td>
<div style="font-size:100%; height: 250px; overflow: auto;">
<gm:list id="Reportedlist" data="${tmp}/test" template="ReportedTemplate">
</div>
</td>
<td>
<div style="font-size:100%; height: 250px; overflow: auto;">
<gm:list id="listOfEvent2" data="${events2}" template="eventTemplate2" pageSize="15">
</gm:list>
</div>
</td>
</tr>
</table>

<gm:list id="Reportlist" data="http://spreadsheets.google.com/feeds/list/pfihDhEKsM18JtPb9aV08MQ/od6/public/values" template="ReportListTemplate" pageSize="15">
<gm:handleEvent event="repaint" execute="getReportlist()"/>
</gm:list>
</gm:section>

<gm:section id="EmailBoard" title="Email Form">
<h2>
Report to superviors by Email:
</h2>

<FORM NAME="testform">
<table border="0" width="600px">
<tr>
<td width="197" valign="top">
<b>Title of Form:</b></td>
<td width="462">
<input type="text" name="inputbox1" value="Inventory Visility Performance of Pharmacies" SIZE="50" MAXLENGTH="50"></input>
</td>

<tr>
<td width="197" valign="top">
<b>Email Content:</b>
</td>
<td width="462">
<textarea name="comment" wrap="physical" rows="7" cols="48">
The inventory visibility of pharmacies is not satisfied the standard.Please update it as soon as possible!
For more details, plz check http://pscv.googlemashups.com/
</textarea>
</td>
</tr>
<tr>
<td width="197" valign="top">
<b>Supervisors Information</b></td>
<tr>
</table>

<table border="0" width="600px">
<tr>
<td width="197" valign="top">
<b>SGH:</b></td>
<td width="462">
<input type="text" name="Name1" value="Peter" SIZE="15" MAXLENGTH="50"></input>
</td>
<td width="197" valign="top">
<b>Email:</b>
</td>
<td width="462">
<input onBlur="CheckEmail(document.testform.Mailbox1.value)" type="text" name="Mailbox1" value="suye0001@ntu.edu.sg" SIZE="25" MAXLENGTH="50"></input>
</td>
</tr>

<tr>
<td width="197" valign="top">
<b>ADC:</b></td>
<td width="62">
<input type="text" name="Name2" value="Jack" SIZE="15" MAXLENGTH="50"></input>
</td>
<td width="100" valign="top">
<b>Email:</b>
</td>
<td width="62">
<input onBlur="CheckEmail(document.testform.Mailbox2.value)" type="text" name="Mailbox2" value="mydadlove@hotmail.com" SIZE="25" MAXLENGTH="50"></input>
</td>
</tr>

<tr>
<td width="97" valign="top">
<b>ADAM:</b></td>
<td width="62">
<input type="text" name="Name3" value="Philip" SIZE="15" MAXLENGTH="50"></input>
</td>
<td width="97" valign="top">
<b>Email:</b>
</td>
<td width="62">
<input onBlur="CheckEmail(document.testform.Mailbox3.value)" type="text" name="Mailbox3" value="mydadlove@gmail.com" SIZE="25" MAXLENGTH="50"></input>
</td>
</tr>

<tr>
<td width="97" valign="top">
<b>BLCC:</b></td>
<td width="62">
<input type="text" name="Name4" value="Michel" SIZE="15" MAXLENGTH="50"></input>
</td>
<td width="97" valign="top">
<b>Email:</b>
</td>
<td width="62">
<input onBlur="CheckEmail(document.testform.Mailbox4.value)" type="text" name="Mailbox4" value="ttmspirit@hotmail.com" SIZE="25" MAXLENGTH="50"></input>
</td>
</tr>

<tr>
<td width="97" valign="top">
<b>AGAPE:</b></td>
<td width="62">
<input type="text" name="Name5" value="Jeff" SIZE="15" MAXLENGTH="50"></input>
</td>
<td width="97" valign="top">
<b>Email:</b>
</td>
<td width="62">
<input onBlur="CheckEmail(document.testform.Mailbox5.value)" type="text" name="Mailbox5" value="syz-58@163.com" SIZE="25" MAXLENGTH="50"></input>
</td>
</tr>

<tr>
<td width="535" colspan="2">
<b><div align="center"><center><p></b>
<INPUT TYPE="button" VALUE="Send Mail" onClick="mailMe(this.form)></INPUT>
</td>
</tr>
</table>
</FORM>
</gm:section>

<gm:section id="eventSection" title="Feedback">
<h2>
System Features Requests
</h2>
<big>
We love feedback! If you have a cool feature request, or just a small change that would make your life easier, let us know
</big>

<gm:list id="listOfEvents" data="${events}" template="eventTemplate" pageSize="15">
</gm:list>
</gm:section>



</gm:container>
</div>

<gm:template id="DisListTemplate">
<table width="100%" class="blue-theme">
<thead>
<tr>
<th class="gm-header"><gm:header sort="DisSort">Distributers</gm:header></th>
</tr>
</thead>
<tbody repeat="true">
<tr>
<td><big><gm:text ref="atom:title"/></big></td>
</tr>
</tbody>
</table>
</gm:template>


<!-- Venue List Template -->
<gm:template id="RetailerListTemplate">
<table width="100%" class="blue-theme">
<thead>
<tr>
<th class="gm-header"><gm:header sort="RetSort">Pharmacy</gm:header></th>
</tr>
</thead>
<tbody repeat="true">
<tr>
<td><big><gm:text ref="atom:title"/></big></td>
</tr>
</tbody>
</table>
</gm:template>

<gm:template id="InventoryTemplate">
<table width="200%" class="blue-theme">
<thead>
<tr>
<th class="gm-header"><gm:header sort="InvSort">Product</gm:header></th>
<th class="gm-header"><gm:header>Inventory</gm:header></th>
<th class="gm-header"><gm:header>Time</gm:header></th>
</tr>
</thead>
<tbody repeat="true">
<tr>
<td><big><gm:text ref="atom:title"/></big></td>
<td><big><gm:text ref="gsx:inventory"/></big></td>
<td><big><gm:text ref="gsx:time"/></big></td>
</tr>
</tbody>
</table>
</gm:template>

<gm:template id="searchTemplate">
<table width="200%" class="blue-theme">
<thead>
<tr>
<th class="gm-header"><gm:header>Search Product</gm:header></th>
<th class="gm-header"><gm:header> </gm:header></th>
<th class="gm-header"><gm:header> </gm:header></th>
</tr>
<tr>
<th class="gm-header"><gm:header>IProduct</gm:header></th>
<th class="gm-header"><gm:header>Inventory</gm:header></th>
<th class="gm-header"><gm:header>Time</gm:header></th>
</tr>
</thead>
<tbody repeat="true">
<tr>
<td><big><gm:text ref="atom:title"/></big></td>
<td><big><gm:text ref="gsx:inventory"/></big></td>
<td><big><gm:text ref="gsx:time"/></big></td>
</tr>
</tbody>
</table>
</gm:template>

<gm:template id="RatingTemplate">
<table width="200%" class="blue-theme">
<thead>
<tr>
<th class="gm-header"><gm:header>Rate</gm:header></th>
</tr>
</thead>
<tbody repeat="true">
<tr>
<td><big><gm:text ref="atom:title"/></big></td>
</tr>
</tbody>
</table>
</gm:template>

<gm:template id="mapVenue">
<table width="250px">
<tbody repeat="true">
<tr>
<td><b><gm:text ref="gsx:title"/></b><br/></td>
</tr>
<tr>
<td><small><gm:text ref="gsx:description"/></small><br/></td>
</tr>
<tr>
<td><small> <gm:link ref="gsx:officiallink" label="More Pharmacy Details"/></small><br/></td>
</tr>
</tbody>
</table>
</gm:template>

<gm:template id="detailedVenue">
<table>
<tbody repeat="true">
<tr>
<td style="padding-left:5px"><b><gm:text ref="atom:title"/></b><br/>
<gm:text ref="gsx:location"/><br/>
</tr>
</tbody>
</table>
</gm:template>

<gm:template id="eventTemplate">
<table width="900px" class="blue-theme" valign="top">
<thead>
<tr>
<th class="gm-header">Feature Request</th>
<th class="gm-header">Short Rationale</th>
<th class="gm-header">When</th>
<th class="gm-header">Edit</th>
</tr>
</thead>
<tbody repeat="true">
<tr>
<td><gm:text ref="atom:title"/></td>
<td><gm:text ref="atom:content"/></td>
<td><gm:date ref="gd:when/@startTime"/></td>
<td><gm:editButtons/></td>
</tbody>
</table>
<gm:create label="Add Request"/>
</gm:template>

<gm:template id="eventTemplate2">
<table width="400px" class="blue-theme" valign="top">
<thead>
<tr>
<th class="gm-header">Comment</th>
<th class="gm-header">Eidt</th>
</tr>
</thead>
<tbody repeat="true">
<tr>
<td HEIGHT=30><gm:text ref="atom:title"/></td>
<td HEIGHT=30><gm:editButtons editonly="true"/></td>
</tbody>
</table>
</gm:template>

<gm:template id="ReportedTemplate">
<table width="400px" class="blue-theme" valign="top">
<thead>
<tr>

<th class="gm-header">Pharmacy</th>
<th class="gm-header">Rating</th>

</tr>
</thead>
<tbody repeat="true">
<tr>
<td HEIGHT=33><gm:text ref="atom:title"/></td>
<td HEIGHT=33><gm:text ref="atom:rating"/></td>
</tr>
</tbody>
</table>

</gm:template>

<gm:template id="ReportListTemplate">
<table width="60%" class="blue-theme" valign="top">
<thead>
<tr>
<th class="gm-header">Pharmacy</th>
<th class="gm-header">Rating</th>
</tr>
</thead>
<tbody repeat="true">
<tr>
<td><gm:text ref="gsx:title"/></td>
<td><gm:text ref="gsx:rate"/></td>
</tr>
</tbody>
</table>
<gm:create label="Add Event"/>

</gm:template>

</gm:page>



